<template>
    <div>
        <div class="breadbox" >
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/notice' }">通知公告</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/noticedetail' }">通知公告详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainbox" >

            <div class="content u-m-tb-20">
                <div class="content_left">
                    <div class="title">
                       {{detail.title}}
                    </div>
                    <div class="time u-m-tb-10">
                        时间：{{detail.updateTime}} 来源：{{detail.type}} 阅读：423
                    </div>
                    <div class="content_text u-m-tb-20" v-html="detail.content" >
                      
                    </div>
                </div>
                <div class="content_right">
                    <div class="search u-p-10">
                        <input v-model="inputvalue" />
                        <img class="u-m-l-10" @click="getnewslist" src="../assets/searchimg.png" alt="">
                    </div>
                    <div class="newbox u-m-t-20">
                        <p>新闻热点</p>
                        <el-divider />
                        <div class="newbox_item pointer" @click="todetail(i.id)"v-for="i in newslist">
                           {{i.title}}
                            <el-divider />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted,getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';
import { getnoticedetail, getadvicedetail,getnewsdetail } from '@/api/user/index'

let router = useRouter();
const inputvalue = ref('');
// 获取路由参数
const route = useRoute();

const noticeId = router.currentRoute.value.query.id;
const { proxy } = getCurrentInstance() as any;
const newslist:any = ref([]);
function getnewslist() {
  proxy.$get('news/list', {
    current: 1,
    limit: 10,
    keyword: inputvalue.value,
  }).then((res: any) => {
    newslist.value = res.data.records
  })
}
getnewslist()
const todetail = async (noticeId)=>{
    // router.push({
    //     path:'/noticedetail',
    //     query:{
    //         id:id,
    //         index:index
    //     }
    // })
    // router.go(0)
    const res = await getnewsdetail(noticeId);
       
    Object.assign(detail, res.data);
}
type detailtype = {
    title?: string,
    content?: string,
    updateTime?: string,
    type?: string
}

const detail:detailtype = reactive({});
if (route.query.index === "1") {
    const getadvicedetaildata = async () => {
        const res = await getnewsdetail(noticeId);
       
        Object.assign(detail, res.data);

    };
    getadvicedetaildata();
}else{
    
    const getnoticedetaildata = async () => {
        const res = await getnoticedetail(noticeId);
        Object.assign(detail, res.data);
    };
    getnoticedetaildata();
}


onMounted(() => {
    // 页面加载后的操作

});
</script>

<style lang="scss" scoped>
/* 在这里添加样式 */
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin flex {
    display: flex;
    align-items: center;
}

.breadbox {
    margin: 30px auto 50px;
    width: 1180px;
}

.mainbox {
    width: 1180px;

    margin: 50px auto;

    .content {
        width: 100%;
        display: flex;

        .content_left {
            flex: 7;
            border-right: 1px solid #ccc;
            padding-right: 20px;

            .title {
                font-size: 20px;
                font-weight: bold;
                text-align: center;
            }

            .time {
                text-align: center;
                font-size: 14px;
            }

            .content_text {
                font-size: 13px;

                img {
                    width: 100%;
                    height: 400px
                }

                .text_aline {
                    text-align: center;
                }
            }
        }

        .content_right {
            flex: 3;
            padding-left: 20px;

            .search {
                @include flex();
                box-sizing: border-box;
                background-color: rgb(44, 155, 245);

                img {
                    width: 25px;
                    height: 25px
                }

            }

            .newbox {
                p {
                    font-size: 14px;
                    font-weight: bold;
                    color: red;
                }

                .newbox_item {
                    font-size: 12px
                }
            }
        }
    }
}

input {
    background-color: rgb(44, 155, 245);
    border-style: solid;
    border-color: #fff;
    outline: none;
    width: 330px;
}

input:focus {
    border-style: solid;
    border-color: #fff;
    outline: none;
}

.el-divider--horizontal {
    margin: 10px 0;
    width: 100%;
}
</style>